<template>
  <div class="">
    <el-dialog v-model="dialogFormVisible"  width="500" @closed="close()" >
        <div class="dialog-top">
          <span>{{ top }}</span>
          <div><span>学号：</span><el-input v-model="postInfo.username"/></div>
          <div><span>姓名：</span><el-input v-model="postInfo.name"/></div>
          <div><span>团队：</span><el-input v-model="postInfo.member"/></div>
          <div><span>密码：</span><el-input v-model="postInfo.password"/></div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close()">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
  </el-dialog>
  </div>
</template>

<script setup lang=''>
import {ref,watch,onMounted} from 'vue'
import {addMemberApi, editMemberApi} from "@/api/home";
const dialogFormVisible = ref(false)
const postInfo = ref(
    {
      username:'',
      name: '',
      member:'',
      password:''
    }
)


const prop = defineProps({
  dialogFormVisible:{
    type:Boolean,
    default:false
  },
  top:{
    type:String,
    default:'新增'
  },
  info:{
    type:Object,
    default:{
      username:'',
      name:'',
      member:''
    }
  }
})
onMounted(()=>{

})

watch(()=>prop.dialogFormVisible, (newVal, oldVal)=>{
    dialogFormVisible.value = newVal
    Object.assign(postInfo.value,prop.info)
})
const emit = defineEmits(['update:dialogFormVisible','updateList'])
const close = () => {
  dialogFormVisible.value = false
  emit('update:dialogFormVisible',false)
}

const submit =async () => {
  if (prop.top==='新增') {
    await addMember()
  }else{
    await editMember()
  }
  close()
  emit('updateList')
}
const addMember=async () => {
  const res = await addMemberApi(postInfo.value)
}
const editMember=async () => {
  const res = await editMemberApi(postInfo.value)
}

</script>

<style scoped>
.dialog-top{
  height: 250px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


</style>
